import React, { useEffect, useRef } from "react";

const AQILevels = ({ levelText, active }) => {
  console.log(levelText, "levelText");
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    // 创建线性渐变对象
    const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    // 添加渐变颜色停止点
    gradient.addColorStop(0, "#1b79ff");
    gradient.addColorStop(0.5, "#00edff");
    gradient.addColorStop(1, "#1b79ff");
    // 设置默认线条样式
    context.strokeStyle = active ? "#ddf3ff" : "#2e3c40";
    context.lineWidth = 4;
    // 绘制第一条线（水平线）
    context.beginPath(); // 开始一个新的路径
    context.moveTo(5, 5); // 设置起点（x, y坐标）
    context.lineTo(22, 5); // 设置终点（x, y坐标），形成一条水平线
    context.stroke(); // 绘制线条

    context.strokeStyle = active ? "#1b79ff" : "#2e3c40";
    context.lineWidth = 2;
    context.beginPath(); // 开始一个新的路径
    context.moveTo(22, 5); // 设置起点（x, y坐标）
    context.lineTo(50, 5); // 设置终点（x, y坐标），形成一条水平线
    context.stroke(); // 绘制线条
    context.strokeStyle = active ? "#1b79ff" : "#2e3c40";
    context.lineWidth = 2;
    context.beginPath(); // 开始一个新的路径
    context.moveTo(50, 5); // 设置起点（x, y坐标）
    context.lineTo(60, 17); // 设置终点（x, y坐标），形成一条水平线
    context.stroke(); // 绘制线条
    context.strokeStyle = active ? gradient : "#2e3c40";
    context.lineWidth = 2;
    context.beginPath(); // 开始一个新的路径
    context.moveTo(60, 17); // 设置起点（x, y坐标）
    context.lineTo(300, 15); // 设置终点（x, y坐标），形成一条水平线
    context.stroke(); // 绘制线条
  }, []);
  return (
    <div style={{ marginBottom: "5px", position: "relative", }}>
 
      <div
        style={{
          position: "absolute",
          color: "#FFF",
          left: "70px",
          bottom: "10px",
          fontSize: "13px",
        }}
      >
        {levelText}
      </div>
      <canvas ref={canvasRef} width={300} height={20} />

      <div
        style={{
          display: "flex",
          left: "15px",
          top: "12px",
          position: "absolute",
          justifyContent: "space-between",
          width: "34px",
        }}
      >
        <div
          style={{
            width: "7px",
            height: "7px",
            transform: "rotate(45deg)",
            backgroundColor: active ?"#0068ff":"#2e3c40",
          }}
        ></div>
        <div
          style={{
            width: "7px",
            height: "7px",
            transform: "rotate(45deg)",
            backgroundColor: active ?"#25ff2a":"#2e3c40",
          }}
        ></div>
        <div
          style={{
            width: "7px",
            height: "7px",
            transform: "rotate(45deg)",
            backgroundColor: active? "azure":"#2e3c40",
          }}
        ></div>
      </div>
    </div>
  );
};

export default AQILevels;
